<template>
  <div>
    <set-header :text="text" :title="title" :choose-color="chooseColor" :last-color="lastColor"></set-header>
      <!--中间的主体部分-->
      <div class="body">
        <div class="body-box">
          <!--image部分-->
          <div class="image box-message">
            <div class="box-title floatLeft">Project image</div>
            <div class="image-message floatLeft ">
              <span class="block"><a href="javascript:(viod)">Choose an image from your computer</a></span>
              <span class="block">This is the main image associated with your project.Make it count!
                    <br/>JPEG,PNG,GIF, or BMP.50MB file limit
                    <br/>At least 1024x576 pixels.16:9 aspect ratio
              </span>
            </div>
            <div class="clear"></div>
          </div>
          <!--description部分-->
          <div class="description box-message">
            <div class="box-title floatLeft">Project description</div>
            <div class="description-message floatLeft" >
              <span class="block description-text">Use your project description to share more about what you’re raising funds to do and how you plan to pull it off. It’s up to you to make the case for your project.</span>
              <span class="block choose">
                <span class="chooseUl block"></span>
              </span>
            </div>
            <div class="clear"></div>
          </div>
          <!--community部分-->
          <div class="community box-message">
            <div class="box-title floatLeft">
              <button class="lab block">Labs</button>
              Request help from the community
            </div>
            <div class="community-message floatLeft ">
              <span class="block community-text">List the skills,resources, or expertise from others that could help enhance your project.
                                  If someone can contribute, they can start a dialogue directly from your project page.
              </span>
             <div class="community-box" v-for="(item,key) in num">
               <span class="community-box-title block">Project need(optional)</span>
               <span class="community-box-txt block">
                 <textarea v-model="textareaTxt[key]"  placeholder="Painting the Sistine Chapel will require extravagant but cost-effective colors. Are you a color mixologist who’d like to help?" @keypress="preNumber(key)"/>
                 <span class="num block"><span>{{item.start}}</span>/<span>{{item.end}}</span></span>
               </span>
             </div>
            </div>
            <div class="clear"></div>
          </div>
          <!--risks部分-->
          <div class="risks box-message">
            <div class="box-title floatLeft">Risks and<br/> challenges</div>
            <div class="risks-message floatLeft ">
              <span class="block risks-qustion">What are the risks and challenges that come with completing your project,and how are you qualified to overcome them?</span>
              <span class="risks-txt block">Every project comes with its own unique risks and challenges. Let your backers know how you’re prepared to overcome therse challenges by settung proper expectations and communicating anything that could cause delays or changes in your production plan.</span>
              <span class="risks-txt block">Every project comes with its own unique risks and challenges. Let your backers know how you’re prepared to overcome therse challenges by settung proper expectations and communicating anything that could cause delays or changes in your production plan.</span>
              <span class="risks-txt block">Every project comes with its own unique risks and challenges. Let your backers know how you’re prepared to overcome therse challenges by settung proper expectations and communicating anything that could cause delays or changes in your production plan.</span>
              <textarea/>
            </div>
            <div class="clear"></div>
          </div>
          <!--FAQs部分-->
          <div class="faqs box-message">
            <div class="box-title floatLeft">Project FAQs</div>
            <div class="faqs-message floatLeft ">
              <span>ou can add frequently asked questions to the FAQ tab on your project page once it goes live. <a href="javascript:(viod)">Learn more</a></span>
            </div>
            <div class="clear"></div>
          </div>
          <!--视频部分  -->
          <div class="video">
            <video></video>
            <button class="floatLeft"></button>
            <span class="block">How to：</span>
            <span class="make">Make an awesome project</span>
            <div class="clear"></div>
          </div>
          <!--文本部分-->
          <div class="text">
            <span class="text-title block">Looking for advice?</span>
            <span class="text-txt block">Visit Campus to read about <a>making great videos </a>and more.</span>
            <span class="text-title block">Important reminder</span>
            <span class="text-txt block">
              Kickstarter is a global community,and including translations of your description and rewards, or using our
              <a>Captions & Subtitles </a>
              to make your videos more accessible, will help your project have a wider appeal. If you’re including text or audio in a language outside of those that we currently support (English, French, German, and Spanish), we also ask that you include English translations or subtitles.
            </span>
            <span class="text-txt block">Don’s use music,images, video, or other content that you don’t have the rights to. Reusing copyrighted material is almost always against the law and can lead to expensive lawsuits down the road. The easiest way to avoid copyright troubles is to create all the content yourself or use content that is free for public use.</span>
            <span class="text-txt block">For legal,mostly free alternatices, check out some of these grest resources<a>:SoundCloud, Vimeo Music Store, Free Music Archive, and ccMixter.</a></span>
          </div>
        </div>
      </div>
    <set-footer></set-footer>
  </div>

</template>

<script>
  import setHeader from '../public/SetHeader'
  import  setFooter from '../public/SetFooter'

    export default {
        name: "story",
        components:{ setHeader, setFooter },
        data(){
          return{
            num:[
              { start : 140, end:140},
              { start : 140, end :140},
              { start : 140, end :140}
              ],
              textareaTxt:[ '', '', ''],
              text:'Use images, video, and a compelling description to describe what you’re making. Be sure to get specific about why people should be excited about your project.',
              title:'Tell us about your project.',
              chooseColor:[ false, false, true, false, false ],
              lastColor:[ '', '', '', '', '' ]
          };
        },
        methods:{
            preNumber(key){
                if(this.num[key].start>0){
                    this.num[key].start = 140 - this.textareaTxt[key].length -1;
                    event.returnValue = true;
                }else {
                    event.returnValue = false;
                }

            }

        },
    }
</script>

<style scoped lang="scss">
  .floatLeft{float: left}
  .clear{clear: both}
  .block{display: block}
  button{
    outline: none;
    border: none;
  }
  a{text-decoration: none}
  .body{
    background-color:#DBDEDD;
  }
  .body-box{
    width:904px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 22px 0 34px 26px;
    .box-title{
      padding: 16px 0 0 13px;
      font-family: Arial-BoldMT;
      font-size: 12px;
      color: #2E2E2E;
      letter-spacing: 0.4px;
      width: 113px;
    }
    .description{margin:23px 0 22px 0;}
    .community {
      padding-bottom: 11px;
      margin-bottom: 20px;
      .lab{
        width: 34px;
        height: 19px;
        background: #459B76;
        border-radius: 2px;
        color: #FFFFFF;
        letter-spacing: -0.6px;
        margin-bottom: 5px;
     }
    }
    .risks{margin-bottom:22px;}
    .image{
      .box-title{width: 84px}
    }
    .box-message{
      width:640px;
      background: #F8F9FD;
      border-radius: 5px;
      .image-message{
        margin-top: 4px;
        width: 450px;
        height: 115px;
        margin-left: 88px;
        background: #FFFFFF;
        border: 1px dashed #596EE1;
        text-align: center;
        border-radius: 6px;
        padding: 21px 0 24px 0;
        box-sizing: border-box;
        .image-text{
          margin-left: 88px;
          font-family: ArialMT;
          font-size: 12px;
          color: #2E2E2E;
          letter-spacing: 0.4px;
          line-height: 18px;
          a{
            font-family: Arial-BoldMT;
            font-size: 14px;
            color: #2C59F6;
            letter-spacing: -0.8px;
          }
        }
      }
      .description-message{
        margin:11px 0 0 11px;
        width: 459px;
        .description-text{
          width: 450px;
          font-family: ArialMT;
          font-size: 12px;
          color: #2E2E2E;
          letter-spacing: 0.2px;
          line-height: 16px;
          margin-bottom: 13px;
        }
        .choose{
          width: 459px;
          height:513px;
          background-color: #ffffff;
          margin-bottom: 4px;
          .chooseUl{
            height: 40px;
            width: 459px;
            background-color: #DBDEDD;
          }
        }
      }
      .community-message{
        width:485px;
        margin:33px 0 0 13px;
        .community-text{
          letter-spacing: -0.3px;
          margin-bottom: 4px;
        }
        .community-box{
          .community-box-title{
            margin: 19px 0 13px 0px;
            padding-left: 12px;
            font-family: Arial-BoldMT;
            font-size: 12px;
            color: #2E2E2E;
            letter-spacing: 0.4px;
          }
          .community-box-txt{
            position: relative;
            width:482px;
            height:60px;
            textarea{
              width:482px;
              height:60px;
              padding:10px 20px 14px 12px;
              font-family: ArialMT;
              font-size: 14px;
              color: #666666;
              letter-spacing: 0.2px;
              line-height: 18px;
              box-sizing: border-box;
              outline: none;
              resize:none;
            }
           .num{
             position: absolute;
             bottom: 14px;
             right: 8px;
             color: #3D3E63;
             font-size: 12px;
             font-family: Arial-BoldMT;
             letter-spacing: 0.4px;
           }
          }
        }
      }
      .risks-message{
        width: 498px;
        margin-left: 14px;
        font-size: 12px;
        line-height: 16px;
        color: #2E2E2E;
        .risks-qustion{
          font-family: Arial-BoldMT;
          letter-spacing: -0.2px;
          margin-top:11px;
        }
        .risks-txt{
          margin-top: 10px;
          font-family: ArialMT;
          letter-spacing: 0.3px;
        }
        textarea{
          width: 494px;
          height: 150px;
          background: #FFFFFF;
          border: 1px solid #DBDEDD;
          margin-top: 12px;
          resize: none;
        }
      }
      .faqs-message{
        width:498px;
        font-family: ArialMT;
        font-size: 12px;
        color: #2E2E2E;
        letter-spacing: 0.2px;
        line-height: 16px;
        margin: 12px 0 0 14px;
        padding-bottom: 16px;
      }
    }
    .video{
      width:220px;
      height: 188px;
      padding:12px 10px 10px 10px;
      box-sizing: border-box;
      background-color: #F0F0F0;
      margin-bottom: 30px;
      video{
        width:200px;
        height:114px;
        background: #FFFFFF;
        margin-bottom: 18px;
      }
      button{
        background: #D8D8D8;
        border: 1px solid #979797;
        width: 25px;
        height: 34px;
        margin-right: 8px;
      }
      span{
        font-family: ArialMT;
        font-size: 12px;
        color: #2E2E2E;
        letter-spacing: 0;
      }
      .make{
        font-family: ArialMT;
        font-size: 14px;
        letter-spacing: -0.7px;
      }
    }
    .text{
      width: 215px;
      color: #2E2E2E;
      span{margin-bottom: 10px}
      .text-title{
        font-family: Arial-BoldMT;
        font-size: 14px;
        letter-spacing: -1.3px;
      }
      .text-txt{
        font-family: ArialMT;
        font-size: 12px;
        letter-spacing: 0.2px;
        line-height: 17px;
        a{color: #2C59F6;}
      }

    }
  }


</style>
